<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>数据统计 -- 活动中奖记录</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
    <style>
        .spinner {
            margin: 11px auto 0;
            height: 20px;
            text-align: center;
        }

        .spinner > div {
            width: 10px;
            height: 10px;
            background-color: #67CF22;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            /* Prevent first frame from flickering when animation starts */
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        @-moz-document url-prefix() {
            fieldset {
                display: table-cell;
            }
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <div class="row">
        <h4 class="col-sm-6 col-xs-9">活动中奖记录：</h4>
        <div class="spinner col-sm-6 col-xs-3" style="text-align: right;" title="正在实时获取数据标志">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>

    <form class="form-inline" enctype="multipart/form-data" name="myForm">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                <div class="form-group">
                    <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>

        <div class="form-group">
            <input id="custCodeInput"  class="form-control input-sm" type="text" placeholder="专卖证号">
        </div>
        <div class="form-group">
            <input id="prizeNameInput" class="form-control input-sm" type="text" placeholder="奖品名称">
        </div>
        <%--<div class="form-group">
            <input id="orderLevelInput" class="form-control input-sm" type="text" placeholder="档位名称">
        </div>--%>
        <div class="form-group">
            <input id="beginTimeInput" class="form-control input-sm" type="text" placeholder="开始时间">
        </div>
        <div class="form-group">
            <input id="endTimeInput" class="form-control input-sm" type="text" placeholder="结束时间">
        </div>
        <button type="button" class="btn btn-success btn-sm" onclick="selectScratchoff();" title="默认查询近一个月的数据">查询
        </button>
        <button type="button" class="btn  btn-info btn-sm" onclick="exportExcel();" title="导出到Excel">导出</button>
        <button type="button" class="btn btn-default btn-sm" onclick="autogetData();" title="实时拉取最新的订单数据">实时获取</button>

        <%-- <button type="button" class="btn  btn-primary btn-sm" onclick="goToStatisticsPage();" title="查看统计数据">统计数据</button>--%>
    </form>
    <div class="table-responsive" id="tableContainer" style="margin-top: 10px;overflow-y: auto">
        <table class="table table-striped table-condensed">
            <thead style="background-color: rgba(53, 128, 202, 1);">
            <tr style="color: rgb(248, 248, 248);">
                <th>序号</th>
                <th>渠道名称</th>
                <th>客户经理</th>
                <th>客户名称</th>
                <th>专卖证号</th>
                <th>中奖用户</th>
                <th>中奖电话</th>
                <th>奖品</th>
                <th>奖品来源</th>
                <th>操作时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(order,index) in orderList">
                <td>{{index+1}}</td>
                <td>{{order.CHANNEL_NAME}}</td>
                <td>{{order.SLSMAN_NAME}}</td>
                <td>{{order.CUST_NAME}}</td>
                <td>{{order.CUST_CODE}}</td>
                <td>{{order.USER_NAME}}</td>
                <td>{{order.MOBILE}}</td>
                <td>{{order.PRIZE_NAME}}</td>
                <td>{{order.SOURCETYPE}}</td>
                <td>{{order.OPERATOR_TIME}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<form action="${contextPath}/page/exportExcel_new" method="post" id="exportExcel" style="display:none">
    <input type="hidden" id="exportExcelData-quXianName" name="stringMap['quXianName']">
    <input type="hidden" id="exportExcelData-channelName" name="stringMap['channelName']">
    <input type="hidden" id="exportExcelData-empName" name="stringMap['empName']">
    <input type="hidden" id="exportExcelData-custCode" name="stringMap['custCode']">
    <input type="hidden" id="exportExcelData-prizeName" name="stringMap['prizeName']">
    <input type="hidden" id="exportExcelData-beginOperatorTime" name="stringMap['beginOperatorTime']">
    <input type="hidden" id="exportExcelData-endOperatorTime" name="stringMap['endOperatorTime']">
    <input type="hidden" name="tableType" value="daZhuanPan">
</form>


<form action="${contextPath}/page/splOrderStatisticsView" target="_blank" method="post" id="splOrderStatisticsViewForm"
      style="display:none">
    <input type="hidden" name="queryParams" id="queryParamsInput">
</form>

</body>
<script src=${contextPath}/static/layer/layer.js></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],
            onPayCheckedValues: [],
            orderProductList: [],
            goToStatisticsQueryData: {
                quXianName: "",
                channelName: "",
                empName: "",
                payStatus: "",
            },
        },
        methods: {
            doPayOrder: function (index) {
                var order = this.orderList[index]
                if (order.payStatusStr == '支付成功') {
                    layer.msg('订单已支付成功')
                    return
                }
                if (order.payStatusStr == '付款中') {
                    layer.msg('订单正在付款，请稍后再试')
                    return
                }
                if (order.payStatusStr == '未订烟') {
                    layer.msg('该客户还未订烟')
                    return
                }
                var vm = this
                var indx = layer.confirm('确定要支付本订单吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    layer.close(indx)
                    layer.load(1)
                    $.ajax({
                        url: '${contextPath}/supermarket/httpPost',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            url: "http://app1:23912/clouderp-cgt-order-rest/api/cgt/order/autoDk",
                            stringMap: {
                                custCode: order.custCode,
                            }
                        },
                        success: function (data) {
                            layer.closeAll('loading')
                            //console.log(data)
                            if (!data.data) {
                                layer.msg("支付失败")
                                return
                            }
                            layer.msg('支付成功')
                            //修改订单状态
                            order.payStatusStr = '支付成功'
                        }
                        ,
                        error: function (error) {
                            layer.closeAll('loading')
                            layer.msg('网络错误')
                        }
                    });


                    //vm.orderList[index] = order
                }, function () {
                });
            },
            showOrderProductDetail: function (custCode, orderId) {
                if (!orderId || !custCode) {
                    return
                }
                var vm = this
                layer.load(1)
                $.ajax({
                    url: '${contextPath}/supermarket/httpPost',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        url: "http://app1:23912/clouderp-cgt-order-rest/api/cgt/order/getOrderItem",
                        stringMap: {
                            custCode: custCode,
                            coNum: orderId,
                        }
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.code != '000') {
                            layer.msg(data.msg);
                            return
                        }
                        //console.log(data)
                        vm.orderProductList = data.data;
                        $("#orderDetailContent").removeClass("hide")
                        layer.open({
                            type: 1,
                            title: '客户信息',
                            closeBtn: 1,
                            shadeClose: true,
                            maxmin: true,
                            area: ['1100px', '600px'],
                            skin: 'yourclass',
                            content: $("#orderDetailContent"),
                            end: function () {
                                $("#orderDetailContent").addClass("hide")
                            }
                        });

                    }
                    ,
                    error: function (error) {
                        layer.closeAll('loading')
                        layer.msg('网络错误')
                    }
                });
            },

        }

    });


    var getQueryParams = function () {
        var quXianName = $("#quXianNameInput").val();
        var channelName = $("#channelNameInput").val();
        var empName = $("#empNameInput").val();
        var custCode = $("#custCodeInput").val();
        var prizeName = $("#prizeNameInput").val();
        var beginOperatorTime = $("#beginTimeInput").val();
        var endOperatorTime = $("#endTimeInput").val();

        return {
            quXianName: quXianName,
            channelName: channelName,
            empName: empName,
            custCode: custCode,
            prizeName: prizeName,
            beginOperatorTime: beginOperatorTime,
            endOperatorTime: endOperatorTime,
        }
    }

    var countNum = 1;
    var intervalGetOrder = function () {

        var order = app.orderList[0]
        var lastCreateTime = "";
        var pageSize = "";
        if (order) {
            lastCreateTime = order.OPERATOR_TIME;
        } else {
            pageSize = 10;
        }
        //var lastCreateTime = "2017-01-11 18:18:18"
        //console.log(lastCreateTime)
        //console.log('第' + (countNum++) + '次获取数据')
        $.ajax({
            url: '${contextPath}/page/getDaZhuanPanPrizeByPageQuery', //localhost:8080
            type: 'post',
            data: {
                stringMap: {
                    intervalGetTime: lastCreateTime,
                    pageSize: pageSize,
                }
            },
            success: function (data) {
                if (data.success) {
                    var dataArray = data.data

                    if (dataArray.length > 0) {

                        var appOrderList = dataArray.concat(app.orderList)

                        if (appOrderList.length > 50) {
                            appOrderList = appOrderList.slice(0, 51)
                        }

                        app.orderList = appOrderList
                    }

                    //console.log('数据长度为：' + dataArray.length)
                } else if (data.success == undefined) {
                    window.location.href = "${contextPath}"
                }
                //console.log(data.data)

            },
            error: function (error) {
                //console.log(error)
            }
        })
    }

    var intervalId;
    intervalId = setInterval(intervalGetOrder, 10000);


    $("#tableContainer").css("border", "1px solid gray");
    //改变div的高度
    $("#tableContainer").height($(window).height() * 0.75);


    intervalGetOrder()

    $('#beginTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        //startDate: nowDate,
    }).on('changeDate', function (e) {
        var startTime = e.date;
        $('#endTimeInput').datetimepicker('setStartDate', startTime);
    });
    $('#endTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    }).on('changeDate', function (e) {
        var endTime = e.date;
        $('#beginTimeInput').datetimepicker('setEndDate', endTime);
    });


    var selectScratchoff = function () {
        var params = getQueryParams();
        layer.load(1)
        $.ajax({
            url: '${contextPath}/page/getDaZhuanPanPrizeByPageQuery',
            type: 'post',
            dataType: 'json',
            data: {
                stringMap: params,
            },
            success: function (data) {
                if (data.success) {
                    var array = data.data;
                    if (array.length > 0) {
                        clearInterval(intervalId)
                        app.orderList = array
                        $(".spinner").addClass("hide")
                    } else {
                        layer.msg("所选条件没有数据")
                    }
                } else {
                    layer.msg(data.message);
                }
                layer.closeAll('loading')
            },
            error: function (error) {
                layer.closeAll('loading')
                layer.msg("网络连接失败")
            }
        })
    };

    var autogetData = function () {
        if ($(".spinner").hasClass("hide") == false) {
            layer.msg("已经在实时获取数据")
            return
        }
        intervalId = setInterval(intervalGetOrder, 10000);
        $(".spinner").removeClass("hide")
    }


    var exportExcel = function () {
        var params = getQueryParams();

        $("#exportExcelData-quXianName").val(params.quXianName);
        $("#exportExcelData-channelName").val(params.channelName);
        $("#exportExcelData-empName").val(params.empName);
        $("#exportExcelData-custCode").val(params.custCode);
        $("#exportExcelData-prizeName").val(params.prizeName);
        $("#exportExcelData-beginOperatorTime").val(params.beginOperatorTime);
        $("#exportExcelData-endOperatorTime").val(params.endOperatorTime);
        $("#exportExcel").submit();

    }


    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">

    var selectEmpNameToSelected = function (channelName) {
        $.ajax({
            url: '${contextPath}/checking/selectEmpNameToSelected?channelName=' + channelName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#empNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectEmpNameToSelected('')

    var selectChannelNameToSelected = function (quXianName) {
        $.ajax({
            url: '${contextPath}/checking/selectChannelNameToSelected?quXianName=' + quXianName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#channelNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                            selectEmpNameToSelected(suggestion.value)
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectChannelNameToSelected('')
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    $.ajax({
        url: '${contextPath}/checking/selectQuXianNameToSelected',
        success: function (data) {
            if (data.success) {
                var countries = data.data
                $('#quXianNameInput').autocomplete({
                    lookup: countries,
                    onSelect: function (suggestion) {
                        //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        selectChannelNameToSelected(suggestion.value)
                    },
                    width: 200,
                    minChars: 0,
                });
            }
        }
    })
    </shiro:hasPermission>
    </shiro:lacksPermission>

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

    var uploadExcelBindCar = function () {
        $("#uplaodExcelFileContent").removeClass("hide")
        this.payQrCodeModalId = layer.open({
            type: 1,
            title: '上传客户信息文件',
            closeBtn: 1,
            area: ['300px', '300px'],
            skin: 'yourclass',
            content: $("#uplaodExcelFileContent"),
            end: function () {
                $("#uplaodExcelFileContent").addClass("hide")
            }
        });
    }


    var goToStatisticsPage = function () {
        var quXianName = $("#quXianNameInput").val();
        var channelName = $("#channelNameInput").val();
        var empName = $("#empNameInput").val();
        var payStatus = $("#payStatusInput").val();


        app.goToStatisticsQueryData.quXianName = quXianName;
        app.goToStatisticsQueryData.channelName = channelName;
        app.goToStatisticsQueryData.empName = empName;
        app.goToStatisticsQueryData.payStatus = payStatus;

        $("#queryParamsInput").val(JSON.stringify(app.goToStatisticsQueryData));
        $("#splOrderStatisticsViewForm").submit();

    }


    var selectOrderLevelToSelected = function () {
        $.ajax({
            url: '${contextPath}/checking/selectOrderLevelToSelected',
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#orderLevelInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        //width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    };
    selectOrderLevelToSelected();
    selectDaZhuanPanPrize('${contextPath}','#prizeNameInput',null);

    //***************** 表头固定 ********************
    // Code goes here
    'use strict'
    window.onload = function(){
        var tableCont = document.querySelector('#tableContainer')
        /**
         * scroll handle
         * @param {event} e -- scroll event
         */
        function scrollHandle (e){
            console.log(this)
            var scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }

        tableCont.addEventListener('scroll',scrollHandle)
    }

    //****************************************
</script>
</html>





